<template>
    <div>
        <el-dialog :model-value="prop.is.isShow" :before-close="cancel" :title="prop.is.isAdd ? '添加菜单' : '编辑菜单'">
            <el-form :model="menuForm" :rules="rules" ref="menuRef">
                <!-- 菜单名称 -->
                <el-form-item label="菜单名称" prop="title" :label-width="formLabelWidth">
                    <el-input v-model="menuForm.title" autocomplete="off" />
                </el-form-item>

                <!-- 上级菜单 -->
                <el-form-item label="上级菜单" prop="pid" :label-width="formLabelWidth">
                    <el-select placeholder="请选择上级菜单" v-model="menuForm.pid" @change="changePid">
                        <el-option label="顶级菜单" :value="0" />
                        <el-option v-for="item in store.getters['menu/getMenulist']" :key="item.id" :label="item.title"
                            :value="item.id" />
                    </el-select>
                </el-form-item>

                <!-- 菜单类型 -->
                <el-form-item label="菜单类型" :label-width="formLabelWidth">
                    <el-radio-group v-model="menuForm.type">
                        <el-radio :label="1" disabled size="large">目录</el-radio>
                        <el-radio :label="2" disabled size="large">菜单</el-radio>
                    </el-radio-group>
                </el-form-item>

                <!-- 菜单地址 -->
                <el-form-item v-if="menuForm.type == 2" label="菜单地址" :label-width="formLabelWidth">
                    <el-select placeholder="请选择菜单地址" v-model="menuForm.url">
                        <el-option v-for="item in pathArr" :key="item.path" :label="item.path"
                            :value="item.path"></el-option>
                    </el-select>
                </el-form-item>

                <!-- 菜单图标 -->
                <el-form-item v-else label="菜单图标" :label-width="formLabelWidth">
                    <el-select placeholder="请选择菜单图标" v-model="menuForm.icon">
                        <el-option v-for="item in iconArr" :key="item" :value="item">
                            <el-icon>
                                <component :is="item"></component>
                            </el-icon>
                        </el-option>
                    </el-select>
                </el-form-item>

                <!-- 状态 -->
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="menuForm.status" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ccc"
                        :active-value="1" :inactive-value="2" />
                </el-form-item>
            </el-form>

            <!-- 确认 取消按钮 -->
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="primary" @click="enter">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>


<script lang='ts' setup>
//引入接收父组件传过来的数据 ->defineProps    响应式数据 ->reactive  这里是为了获取DOM节点 ->ref
import { defineProps, reactive, ref, defineExpose } from "vue";
//引入仓库 Vuex
import { useStore } from "vuex";
//引入element-plus 封装好的验证规则
import { FormRules, ElMessage } from 'element-plus';
//引入地址数组
import { pathArr } from "../../router";
//引入 添加  或者 编辑 接口->addOrEditMenu  获取一条数据 ->menuInfo
import { addOrEditMenu, menuInfo } from "../../request/api";

//=================数据================
//弹窗左侧文字宽度
const formLabelWidth = '120px';
//父组件传过来的数据
let prop: any = defineProps({
    is: Object
});

//表单数据
let menuForm = reactive({
    title: "",//标题
    pid: 0,//上级分类
    icon: '',//图标
    type: 1,//类型
    url: "",//菜单地址
    status: 1//菜单状态
});
//创建仓库
const store = useStore();
//获取DOM节点
const menuRef = ref();
//创建验证规则
const rules = reactive<FormRules>({
    title: [
        { required: true, message: '请输入菜单名称', trigger: 'blur' },
        { min: 2, max: 8, message: '长度应在2-8', trigger: 'blur' },
    ],
    pid: [
        {
            required: true,
            message: '请选择上级菜单',
            trigger: 'change',
        },
    ],
});
//定义一个icon图标数组  
const iconArr = ['Plus', 'Minus', 'LocationInformation', 'CreditCard', 'Cpu', 'Sell', 'Goods', 'SoldOut', 'Delete', 'InfoFilled', 'UserFilled', 'Tools', 'HomeFilled', 'Menu', 'Avatar', 'Microphone'];



//================事件=================
//点击取消事件 关闭弹窗
const cancel = () => {
    prop.is.isShow = false;
    //重置表单
    menuForm = reactive({
        title: "",//标题
        pid: 0,//上级分类
        icon: '',//图标
        type: 1,//类型
        url: "",//菜单地址
        status: 1//菜单状态
    });
    //清除表单验证规则
    menuRef.value.resetFields();
};
//点击确认事件
const enter = () => {
    //判断是编辑 还是  添加
    let url: string = prop.is.isAdd ? '/menuadd' : '/menuedit';

    //表单验证 是否通过
    menuRef.value?.validate(async (val: boolean) => {
        //通过验证
        if (val) {
            //添加接口
            let res: any = await addOrEditMenu(url, menuForm);
            //判断是否添加成功
            if (res.code == 200) {
                //提示添加成功
                ElMessage.success(res.msg);
                //重新获取数据
                store.dispatch('menu/changeMenuAction');
                //关闭弹窗
                cancel();
            } else {
                //失败提示
                ElMessage.error(res.msg);
            }
        };

    });
};
//选择pid 实现联动效果
const changePid = (e: number) => {
    if (e == 0) {
        menuForm.type = 1
    } else {
        menuForm.type = 2
    }
};
//这个是编辑回显的方法
const lookup = async (id: number) => {
    //获取一条数据
    let res: any = await menuInfo({ id });
    Object.assign(menuForm, res.list, { id });
};

//暴露 才能在父组件找到方法
defineExpose({
    lookup
})




</script>


<style lang='less' scoped></style>